<template>
	<div class="video_box">
		<video ref="myvideo" :autoplay="autoplay" @timeupdate="getcurrentTime" @canplay="gettotal" :src="src"
		 webkit-playsinline="true" playsinline="true" x5-playsinline></video>
		<div class="videocontrols flex-between">
			<div class="flex-star controlsleft">
				<svg class="icon" ref="playbtn" @click="vplay" aria-hidden="true">
					<use :xlink:href='this.play? "#icon-zantingtingzhi":"#icon-bofang"'></use>
				</svg>
				<div class="video_line">
					<div class="line_inner" :style='"width:"+line+"%"'></div>
					<input @change="lineChange" :value="line" type="range" />
				</div>
				<div class="vtime">
					{{currentTime | timefilter}}/{{duration | timefilter}}
				</div>
			</div>
			<div class="flex-star controlsRight">
				<div class="playspeed" @click="playspeedIsShowclick">
					倍数
					<div :style="playspeedIsShow? 'display:block':'display:none'" class="speed_chose">
						<div v-for="(item,index) in [2.0,1.5,1.25,1,0.75,0.5]" @click="setSpeed">{{item}}</div>
					</div>
				</div>
				<svg class="icon" ref="playbtn" @click="setMuted" aria-hidden="true">
					<use :xlink:href='isMuted? "#icon-jingyin":"#icon-yinliang"'></use>
				</svg>
				<svg class="icon" ref="playbtn" @click="toggleFullscreen" aria-hidden="true">
					<use xlink:href='#icon-max-screen'></use>
				</svg>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				myvideo: null,
				play: null,
				currentTime: "00:00",
				duration: "00:00",
				playspeedIsShow: false,
				isMuted: false,
			}
		},
		filters: {
			timefilter(time) {
				time = Math.floor(parseFloat(time));
				let hours = Math.floor(time / 3600);
				let minutes = Math.floor(time / 60);

				if (minutes < 10) {
					minutes = "0" + minutes
				}

				let scond = time % 60;

				if (scond < 10) {
					scond = "0" + scond
				}

				if (hours) {
					return hours + ":" + minutes + ":" + scond;
				} else {
					return minutes + ":" + scond;
				}
			}
		},
		mounted() {
			this.play = this.autoplay;
			this.myvideo = this.$refs.myvideo;
		},
		props: {
			src: {
				type: String,
				required: true
			},
			autoplay: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			vplay() {
				if (this.play) {
					this.$notice({
						msg: "暂停",
						flag: true
					});
					this.myvideo.pause();
				} else {
					this.$notice({
						msg: "播放",
						flag: true
					});
					this.myvideo.play();
				}
				this.play = !this.play;
			},
			gettotal() {
				this.duration = this.myvideo.duration;
			},
			getcurrentTime() {
				this.currentTime = this.myvideo.currentTime;
			},
			playspeedIsShowclick() {
				this.playspeedIsShow = !this.playspeedIsShow;
			},
			setSpeed() {
				let speed = parseFloat(event.target.innerText)
				this.myvideo.playbackRate = speed;
				this.$notice({
					msg: speed + '倍播放',
					flag: true
				});
			},
			setMuted() {
				console.log();
				if (!this.myvideo.muted) {
					this.myvideo.muted = true;
				} else {
					this.myvideo.muted = false;
				}
				this.isMuted = !this.isMuted;
			},
			toggleFullscreen() {
				let isFullscreen = document.webkitIsFullScreen || document.fullscreen;
				console.log(isFullscreen)
				if (!isFullscreen) {
					const inFun = this.myvideo.requestFullScreen || this.myvideo.webkitRequestFullScreen;
					inFun.call(this.myvideo);
				}
			},
			lineChange() {
				let thisVal = parseInt(event.target.value);
				this.myvideo.currentTime = thisVal / 100 * this.myvideo.duration;
				// console.log()
			}
		},
		computed: {
			line() {
				return parseInt(Math.floor(parseFloat(this.currentTime)) / Math.floor(parseFloat(this.duration)) * 100);
			}
		}
	}
</script>

<style scoped>
	.video_box {
		width: 100%;
		position: relative;
		font-size: 0;
	}

	.video_box video {
		width: 100%;
	}

	.videocontrols {
		padding: .15rem .2rem;
		color: #fff;
		position: absolute;
		width: 100%;
		z-index: 1;
		font-size: .2rem;
		bottom: 0;
		left: 0;
	}

	.controlsleft {
		width: calc(100% - 2rem);
	}

	.videocontrols svg {
		width: .4rem;
		height: .4rem;
	}

	.vtime {
		margin-left: .1rem;
	}

	.video_line {
		height: 2px;
		width: 45%;
		margin-left: .15rem;
		position: relative;
		background: rgba(255, 255, 255, .5);
	}

	.line_inner {
		position: absolute;
		height: 2px;
		background: #fff;
		width: 50%;
		z-index: 1;
		pointer-events: none;
		box-shadow: 0 0 2px 2px rgba(255, 255, 255, .4);
	}

	.playspeed {
		position: relative;
	}

	.speed_chose {
		position: absolute;
		top: -2.2rem;
		text-align: center;
		background: rgba(255, 255, 255, .2);
		padding: 0 .2rem;
		border-radius: 4px;
		left: -.2rem;
	}

	.speed_chose div {
		padding: .02rem 0;
	}

	.controlsRight svg {
		margin-left: .15rem;
	}


	input[type=range] {
		-webkit-appearance: none;
		width: 100%;
		position: absolute;
		display: block;
		left: -.05rem;
		top: -.05rem;
		border-radius: 10px;
	}

	input[type=range]::-webkit-slider-thumb {
		-webkit-appearance: none;
	}

	input[type='range']::-webkit-slider-runnable-track {
		height: 2px;
		border-radius: 2px;
	}

	input[type='range']:focus {
		outline: none;
	}

	input[type='range']::-webkit-slider-thumb {
		-webkit-appearance: none;
		height: .2rem;
		width: .2rem;
		margin-top: -0.09rem;
		/*使滑块超出轨道部分的偏移量相等*/
		background: #fafff6;
		border-radius: 50%;
		/*外观设置为圆形*/
		border: solid 1px #dcc7ff;
		/*设置边框*/
		box-shadow: 0 0.125em 0.125em #3b4547;
		/*添加底部阴影*/
	}

	input[type='range']::-webkit-fill-lower {
		/*进度条已填充的部分*/
		height: 22px;
		border-radius: 10px;
		background: red;
	}
</style>
